<template>
  
</template>
<script setup lang="ts">

// 插件：即在全局使用的实现特定功能的组件
// 插件包含 vue 文件，以实现插件的 UI 结构和 ts 文件，实现插件的全局注册
// 插件中包含控制其是否显示的变量及方法，在全局注册后，可以全局使用调用该方法，控制插件是否使用

// 插件注册：在 main.ts 中调用 app.use 方法传入插件文件会将插件全局注册
// 全局注册后会调用插件的 ts 文件
// 如果 ts 文件导出为对象，则执行 install 方法，为函数则将其默认为 install 方法并执行
// 执行 install 方法时会将 app 作为参数传入，app 是用来注册全局函数或变量的

// 在插件的 ts 文件中，需要将插件的 vue 文件导入
// 调用 createVNode 方法将 vue 文件转化为虚拟 DOM 即 VNode
// 调用 render 函数，将 VNode 渲染到页面指定位置，实现插件的全局注册挂载
// 调用 render 函数后，可以在 VNode.component 上访问到插件的实例

// 插件需要对应的方法控制其是否使用
// 在插件的 vue 文件中定义控制的变量及方法，使用 defineExpose 导出
// 在插件的 ts 文件中，访问 VNode.component.exposed 对象可以获得 defineExpose 导出
// 将 VNode.component.exposed 对象的对应方法或变量注册为全局函数或变量，并在 main.ts 中声明
// 在任意组件中，通过 getCurrentInstance() 方法获取组件实例
// instance.proxy 上可以访问到注册的全局函数或变量，可以控制是否调用插件


// 获取组件实例
const instance = getCurrentInstance()
// 组件实例的 proxy 上调用对应的方法
instance?.proxy?.$loading1.show()
setTimeout(()=>{
  instance?.proxy?.$loading1.hide()
},2000)
console.log(instance?.proxy?.$loading1.flag.value)
</script>
<style scoped>

</style>
